<template>
  <el-dialog :visible.sync="visible" width="80%" @close="close" :append-to-body="true">
    <div class="largeScreen fcbc fv">
      <div class="titleBox flt pt20 pb20 w1">
        <div class="flex-1 tableTitle f20 pl20">发电效率排名</div>
      </div>
      <div class="tableBox p30 flex-1 w1 fcbc fv" style="height: 95%;">
        <el-table v-loading="loading" :data="tableList" style="width: 100%" class="flex-1">
          <el-table-column type="index" label="序号" align="center"></el-table-column>
          <el-table-column prop="dcmc" label="电场名称" align="center"> </el-table-column>
          <el-table-column prop="fdgl" label="平均功率" align="center"> </el-table-column>
          <el-table-column prop="fdl" label="发电量" align="center"> </el-table-column>
          <el-table-column prop="fdlv" label="发电效率" align="center">
            <template slot-scope="scope">
              <span style="color: greenyellow;font-weight: bold;">{{ scope.row.fdlv }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="w1">
          <pagination layout="prev, pager, next" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { dzdxtbpm} from "@/api/dp/cockpit"
export default {
  name: "tableList",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    visible: {
      get() {
        return this.dialogVisible;
      },
      set(val) {
        this.$emit("update:dialogVisible", val);
      },
    },
  },
  data() {
    return {
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      tableList: [
      ]
    };
  },
  created() {
    this.getList();
  },
  methods: {
    close() {
      this.$emit("update:dialogVisible", false);
    },
    /** 查询参数列表 */
    getList() {
      this.loading = true;
      dzdxtbpm({
          pageNum: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize

      }).then(response => {
        this.total = response.total;
        this.loading = false;
        this.tableList = response.rows || [];
      });
    },
  },
};
</script>

<style scoped lang="scss">
.largeScreen {
  background-image: url("~@/assets/images/windPower/tableBg.png");
  background-size: 100% 100%;
  width: 100%;
  height: 595px;
  padding-bottom: 10px;
  position: relative;
  .titleBox {
    height: 40px;
    width: 100%;
  }
  .tableTitle {
    color: #ffffff;
  }
}
::v-deep .el-dialog__wrapper {
  z-index: 9999 !important;
}
::v-deep .el-dialog {
  background-color: transparent !important;
}
// 表格
::v-deep .el-table__body-wrapper {
  height: calc(100% - 30px)!important;
  font-size: 12px!important;
}
::v-deep .el-table__body-wrapper table {
  height: 100%!important;
}
::v-deep .el-table__body-wrapper tbody {
  height: 100%!important;
}

::v-deep .el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}
::v-deep .el-table::before {
  height: 0px;
}
::v-deep .el-table th {
  background-color: #153864cc !important;
  border-bottom: none !important;
  color: #36f5f7;
}
::v-deep .el-table tr {
  background-color: transparent !important;
  color: #ffffff;
  height: 10%;
}
::v-deep .el-table td {
  padding: 5px 0 !important;
}
::v-deep .el-table--enable-row-transition .el-table__body td,
::v-deep .el-table .cell {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  line-height: normal;
}
::v-deep .el-table__empty-block{
  margin-top: -200px;
}


// 分页
::v-deep .pagination-container {
  background: transparent;
}
::v-deep .el-pagination.is-background .btn-prev,
::v-deep .el-pagination.is-background .btn-next,
::v-deep .el-pagination.is-background .el-pager li {
  background-color: transparent;
  color: #0aa7ff;
  border: 1px solid #0aa7ff;
}
// 表格
::v-deep .el-table__body-wrapper {
  font-size: 14px !important;
}
::v-deep .el-table__body-wrapper table {
  display: block!important;
  height: 417px !important;
  overflow: auto;
}
::v-deep .el-table__body-wrapper tbody {
  height: 100% !important;
}

::v-deep .el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}
::v-deep .el-table::before {
  height: 0px;
}
::v-deep .el-table th {
  background-color: #153864cc !important;
  border-bottom: none !important;
  color: #36f5f7;
}
::v-deep .el-table tr {
  background-color: transparent !important;
  color: #ffffff;
  height: 41px;
}
::v-deep .el-table td {
  padding: 5px 0 !important;
}
::v-deep .el-table--enable-row-transition .el-table__body td,
::v-deep .el-table .cell {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  line-height: normal;
}
</style>
